<template>
  <view class="search">
    <view class="top">
      <view class="select">全部</view>
      <view>基金</view>
      <view>定期</view>
      <view>黄金</view>
      <view>活期</view>
    </view>
    <view class="mian">
      <view class="list">
        <view class="name"><view class="balck">广发聚鑫债券A</view><view class="red">五星评价</view></view>
        <view class="data">
          <view>
            <view class="red">11.06%</view>
            <view>近一年收益率</view>
          </view>
          <view>
            <view class="black">名匠坐镇</view>
            <view>稳健风格 前瞻配置</view>
          </view>
        </view>
        <view class="line"/>
      </view>
       <view class="list">
        <view class="name"><view class="balck">广发聚鑫债券A</view><view class="red">五星评价</view></view>
        <view class="data">
          <view>
            <view class="red">11.06%</view>
            <view>近一年收益率</view>
          </view>
          <view>
            <view class="black">名匠坐镇</view>
            <view>稳健风格 前瞻配置</view>
          </view>
        </view>
             <view class="line"/>
      </view>
    </view>
  </view>
</template>

<script>
export default {};
</script>
<style lang="scss" scoped>
.search {
  background-color: #fafafa;
  padding: 24rpx;
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    view {
      background-color: #b6aeae;
      padding: 5rpx 20rpx;
      border-radius: 16rpx;
    }
    .select {
      background-color: #a82323;
      color: red;
    }
  }

  .mian {
      background-color:#ffffff;
      margin-top: 30rpx;
      border-radius: 16rpx;
    .list {
      .name{
          display: flex;
          .balck{
              font-size: 30rpx;
              font-weight: 700;
          }
          .red{
              color: red;
              background-color: rgba(139, 29, 29, 0.644);
              border-radius: 16rpx;
              padding: 5rpx;
              margin-left: 20rpx;
          }
      }
      .data {
        display: flex;
        justify-content: space-between;
        font-size: 28rpx;
        color: #8f8f8f;
        align-items: center;
        padding: 10rpx 0;
        .red{
            font-size: 50rpx;
            font-weight: 700;
            color: red;
        }
        .black{
            color: black;
            font-size: 30rpx;
            padding-bottom:10rpx ;
        }
      }
      .line{
          border-top: 2rpx solid red;
          margin: 20rpx 0;
      }
    }
  }
}
</style>